<template>
  <!--左侧菜单  -->
  <div class="sidebar">
    <el-menu :default-active="activeIndex" router class="el-menu-vertical-demo" :collapse="isCollapse" background-color="rgb(3, 31, 59)"
      text-color="#FFFFFF" active-text-color="#fff" :unique-opened="true" :style="{ height: menuHeight + 'px', 'overflow-y': 'auto' }">
      <el-menu-item index="/home">
        <i class="fa fa-home"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-menu-item v-for="child in functionMenu" v-bind:key="child.code" :index="child.url" :class="child.isCheck ? 'menu_select' : ''">
        <i :class="child.icon"></i>
        <span slot="title">{{ child.name }}</span>
      </el-menu-item>
      <el-submenu :index="menu.url" v-for="menu in moduleMenu" v-bind:key="menu.name">
        <template slot="title">
          <i :class="menu.icon"></i>
          <span slot="title">{{ menu.name }}</span>
        </template>
        <el-menu-item v-for="child in menu.children" v-bind:key="child.name" :index="child.url" :class="child.isCheck ? 'menu_select_active' : ''">
          {{ child.name }}</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import {
  mapGetters
} from "vuex";

export default {
  name: "Sidebar",
  data() {
    return {
      menuHeight: 0,
      menus: [],
      functionMenu: [],
      moduleMenu: [],
    };
  },
  computed: {
    ...mapGetters(["sidebar"]),
    isCollapse() {
      return !this.sidebar.opened;
    },
    activeIndex() {
      const thisRoutPath = this.$route.path;
      let routPath1 = thisRoutPath.split("/")[1];
      this.menus.forEach((e) => {
        if (e.url.replace("/", "") == routPath1) {
          if (e.children.length == 0) {
            e.isCheck = true;
          } else {
            e.children.forEach((ele) => {
              if (ele.url == thisRoutPath) {
                ele.isCheck = true;
              } else {
                ele.isCheck = false;
              }
            });
          }
        } else {
          if (e.children.length == 0) {
            e.isCheck = false;
          } else {
            e.children.forEach((ele) => {
              ele.isCheck = false;
            });
          }
        }
      });
      return thisRoutPath;
    },
  },
  mounted() {
    var that = this;
    this.menuHandle();
    this.$nextTick(function () {
      var clientHeight = document.body.clientHeight; //屏幕高度
      var headerHeight = document.getElementsByClassName("header")[0]
        .scrollHeight; //header高度
      that.menuHeight = clientHeight - headerHeight;
    });
  },
  methods: {
    //路由处理
    menuHandle() {
      var that = this;
      var menus = this.$storage.getMenus();

      this.moduleMenu = []; //模块路由
      this.functionMenu = []; //功能路由
      menus.forEach((e) => {
        if (e.type == 2) {
          that.functionMenu.push(e);
        } else {
          that.moduleMenu.push(e);
        }
        that.menus.push(e);
      });
    },
  },
};
</script>

<style scoped>
.sidebar {
  background-color: #1a1c21;
  margin: 0 auto;
  height: 100%;
}

/* 无子节点选中时的样式 */
.menu_select {
  background-color: #fff !important;
  color: #222 !important;
}
.el-menu {
  border-right: none;
}
/* 无子节点的图标 */
.el-menu-item.is-active > i {
  color: #909399 !important;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}

/* 选中时字体的颜色 */
.el-menu-item.is-active {
  background-color: #3371c9 !important;
  color: #ffffff !important;
}
/* 选中子节点的样式 */
.menu_select_active {
  background-color: #3371c9 !important;
  color: #ffffff !important;
}

/* 选中子节点的时候的 父级的图标 */
.el-submenu.is-active >>> .el-submenu__title > i {
  color: #909399 !important;
}

/* 选中子节点的时候的 父级 */
.el-submenu.is-active >>> .el-submenu__title {
  color: #ffffff !important;
  /* background-color: #3371c9 !important; */
}

/* 子节点内默认的样式 */
.el-submenu .el-menu-item {
  padding-left: 55px !important;
  min-width: auto;
  border-left: 5px solid #222;
}

.el-submenu {
  list-style: none;
  margin: 0;
  padding-left: 0;
  text-align: left;
}

/* 子节点划过时 */
.el-submenu .el-menu-item:hover {
  padding-left: 60px !important;
  background-color: #3371c9 !important;
  color: #ffffff !important;
}

.el-menu-item {
  text-align: left;
}

.el-menu-item:hover {
  background-color: #3371c9 !important;
}

.el-menu-item i {
  padding-bottom: 4px;
}

.el-submenu__title i {
  padding-bottom: 4px;
}

@media all and (max-width: 768px) {
  .el-menu--collapse {
    width: 0;
    overflow: hidden;
  }
}
</style>
